<template>
  <ElCard :style="{ 'margin-top': props.marginTop }">
    <template #header>
      <div class="card-header">
        <div class="left">
          <div class="icon">&nbsp;</div>
          <div class="title">动物标本</div>
        </div>
        <div class="right">
          <ElButton type="primary" v-if="!edit" @click="edit = true">编辑</ElButton>
          <ElButton type="primary" v-if="edit" @click="onSaveClicked">保存</ElButton>
          <ElButton type="primary" v-if="edit" @click="onResetClicked">撤销</ElButton>
        </div>
      </div>
    </template>
    <ElForm :model="form" ref="formRef" :rules="rules" status-icon>
      <div class="table-main">
        <el-table highlight-current-row :data="table" :border="true">
          <el-table-column prop="column" align="center" label="标本" />
          <el-table-column prop="birdSpecimen" align="center" label="鸟类标本">
            <template #default>
              <div v-if="!edit">{{ form.birdSpecimen }}</div>
              <div v-else>
                <ElFormItem prop="birdSpecimen">
                  <ElInputNumber v-model="form.birdSpecimen" controls-position="right" clearable />
                </ElFormItem>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="insectSpecimen" align="center" label="昆虫标本">
            <template #default>
              <div v-if="!edit">{{ form.insectSpecimen }}</div>
              <div v-else>
                <ElFormItem prop="insectSpecimen">
                  <ElInputNumber v-model="form.insectSpecimen" controls-position="right" clearable />
                </ElFormItem>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="plantSpecimen" align="center" label="植物标本">
            <template #default>
              <div v-if="!edit">{{ form.plantSpecimen }}</div>
              <div v-else>
                <ElFormItem prop="plantSpecimen">
                  <ElInputNumber v-model="form.plantSpecimen" controls-position="right" clearable />
                </ElFormItem>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="amphibiansSpecimen" align="center" label="两栖标本">
            <template #default>
              <div v-if="!edit">{{ form.amphibiansSpecimen }}</div>
              <div v-else>
                <ElFormItem prop="amphibiansSpecimen">
                  <ElInputNumber v-model="form.amphibiansSpecimen" controls-position="right" clearable />
                </ElFormItem>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </ElForm>
  </ElCard>
</template>

<script setup lang="ts">
import { ref, watch, unref, reactive } from 'vue'
import { ElForm, FormInstance, FormRules, ElFormItem } from 'element-plus'
import { EducationResource, saveOrUpdateEducationResourceSpecimen } from '@api/tby/education/educationResource'
import { ElMessage } from 'element-plus'
import { validateInteger } from '@api/tby/common/common'

interface TableData {
  column: string
  birdSpecimen: number
  insectSpecimen: number
  plantSpecimen: number
  amphibiansSpecimen: number
}

const form = ref<Partial<EducationResource.Form>>({})
const edit = ref(false)
const table = ref<TableData[]>([
  {
    column: '数量',
    birdSpecimen: 0,
    insectSpecimen: 0,
    plantSpecimen: 0,
    amphibiansSpecimen: 0
  }
])

interface FormParamProps {
  id?: number
  formDetail: Partial<EducationResource.Form>
  marginTop: string
}

const props = withDefaults(defineProps<FormParamProps>(), {
  marginTop: '0px'
})

watch(
  () => props.formDetail,
  (n: Partial<EducationResource.Form>) => {
    form.value.birdSpecimen = n.birdSpecimen || 0
    form.value.insectSpecimen = n.insectSpecimen || 0
    form.value.plantSpecimen = n.plantSpecimen || 0
    form.value.amphibiansSpecimen = n.amphibiansSpecimen || 0
    fillTableData()
  }
)

watch(
  () => props.id,
  (n?: number) => {
    if (n) {
      form.value.id = n
    } else {
      form.value.id = undefined
    }
  }
)

const fillTableData = () => {
  const formData = { ...unref(form) }
  table.value = []
  table.value.push({
    column: '数量',
    birdSpecimen: formData.birdSpecimen,
    insectSpecimen: formData.insectSpecimen,
    plantSpecimen: formData.plantSpecimen,
    amphibiansSpecimen: formData.amphibiansSpecimen
  } as TableData)
}

const rules = reactive<FormRules>({
  birdSpecimen: [
    { required: true, message: '请输入鸟类标本', trigger: 'blur' },
    { validator: validateInteger, trigger: 'blur' }
  ],
  insectSpecimen: [
    { required: true, message: '请输入昆虫标本', trigger: 'blur' },
    { validator: validateInteger, trigger: 'blur' }
  ],
  plantSpecimen: [
    { required: true, message: '请输入植物标本', trigger: 'blur' },
    { validator: validateInteger, trigger: 'blur' }
  ],
  amphibiansSpecimen: [
    { required: true, message: '请输入两栖标本', trigger: 'blur' },
    { validator: validateInteger, trigger: 'blur' }
  ]
})

/**面积表单 */
const formRef = ref<FormInstance>()

const emit = defineEmits(['success'])

const onSaveClicked = () => {
  if (!formRef.value) return
  formRef.value?.validate(valid => {
    if (!valid) {
      return
    }
    //form.value = table.value[0]
    const formData = { ...unref(form) }
    saveOrUpdateEducationResourceSpecimen(formData).then(response => {
      if (response.code != 0) {
        ElMessage({
          type: 'error',
          message: response.msg
        })
        return
      }
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
      let data: EducationResource.Form = response.data as EducationResource.Form
      edit.value = false
      emit('success', data.id)
    })
  })
}

const onResetClicked = () => {
  fillTableData()
  edit.value = false
}
</script>

<style scoped lang="scss">
.card-header {
  height: 25px;
  line-height: 25px;
  .left {
    float: left;
    .icon {
      width: 5px;
      background-color: #104cf0;
      float: left;
    }
    .title {
      float: left;
      margin-left: 5px;
      font-weight: bold;
    }
  }
  .right {
    float: right;
  }
}
.mo-input--number {
  border: 1px solid #dcdfe6;
  display: flex;
  border-radius: 4px;
  .el-input-number--mini {
    flex: 1;
  }
  ::v-deep .el-input__inner {
    border: none !important;
  }
}
.define-append {
  width: 40px;
  display: inline-block;
  background: #f5f7fa;
  padding: 0px 3px;
  border-left: none;
  height: 32px;
  line-height: 32px;
  color: #909399;
  font-size: 12px;
  text-align: center;
}
:deep(.el-form-item--default) {
  margin-bottom: 0px;
}
:deep(.el-form-item__content) {
  position: relative;
}
:deep(.el-form-item__error) {
  position: absolute;
  top: 10px;
  left: 160px;
}
</style>
